---
title: Separator
description: A flexible separator component for creating visual divisions between content with horizontal and vertical orientations.
---
import { HorizontalSeparator, VerticalSeparator, DecorativeSeparator } from "./separator.example";

## Overview

The Separator component provides a consistent way to create visual divisions between content sections. It's designed to improve content organization and readability with flexible orientation options and customizable styling.

## Usage

```tsx
import { Separator } from "@unkey/ui";

export default function MyComponent() {
  return (
    <div>
      <p>Content above</p>
      <Separator />
      <p>Content below</p>
      
      <div className="flex">
        <p>Left content</p>
        <Separator orientation="vertical" />
        <p>Right content</p>
      </div>
    </div>
  );
}
```

## Examples

### Horizontal Separator

Standard horizontal separator for dividing content sections.

<HorizontalSeparator />

### Vertical Separator

Divider for horizontal layouts such as toolbars or side-by-side content.  

<VerticalSeparator />

### Decorative Separator

Shows a separator with custom decorative styling.  

<DecorativeSeparator />

## Features

- **Multiple Orientations**: Horizontal and vertical separator options
- **Customizable Styling**: Extensive styling options through className prop
- **Accessibility**: Built-in accessibility support with proper ARIA attributes
- **Responsive Design**: Adapts to different screen sizes
- **Dark Mode Support**: Consistent appearance in light and dark themes
- **Flexible Usage**: Can be used in various layout contexts

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | The orientation of the separator |
| `className` | `string` | `undefined` | Additional CSS classes to apply |
| `decorative` | `boolean` | `false` | Whether the separator is purely decorative |

The component also accepts all standard HTML hr/div element props.

## Variants

### Horizontal
- Default orientation for most use cases
- Creates visual breaks between content sections
- Ideal for separating different content areas
- Uses semantic `<hr>` element

### Vertical
- Divides content in horizontal layouts
- Useful for sidebar navigation or content columns
- Maintains consistent spacing
- Uses `<div>` element with vertical styling

## Structure

The Separator component is a simple, self-contained component that renders as either an `<hr>` element (horizontal) or `<div>` element (vertical) with appropriate styling and accessibility attributes.

## Styling

The Separator component includes default styling with:

- Consistent border styling and colors
- Proper spacing and margins
- Dark mode support
- Responsive design
- Focus states for accessibility
- Customizable through className prop

### Custom Styling

You can customize the appearance using the className prop:

```tsx
<Separator 
  orientation="horizontal"
  className="custom-separator-class border-2 border-blue-500"
/>
```

## Accessibility

The Separator component is built with accessibility in mind:

- **Semantic HTML**: Uses appropriate HTML elements (`<hr>` for horizontal)
- **ARIA Attributes**: Proper ARIA labels for screen readers
- **Screen Reader Support**: Announces separator presence appropriately
- **High Contrast**: Maintains proper contrast ratios
- **Focus Management**: Proper focus handling in interactive contexts